/*
增删改查
1 查询
  定义一个函数
  发送请求获取数据渲染页面
2 增加
  1 弹出关闭和模态框(2种)
     1通过给标签添加属性即可
       1 显示 data-bs-toggle="modal" data-bs-target="#addModal"
       2 隐藏 data-bs-dismiss="modal"
     2通过 调用js代码来实现
       1 $("模态框的选择器").modal("show")
       2 $("模态框的选择器").modal("hide")
  2 初始化模态框中 省市区三个组件
    1 初始化 组件的函数数据 
      发送请求 完成组件渲染
    2 给省绑定change事件 触发获取对应市
    3 给市绑定change事件 触发获取对应县
  3 给表单绑定提交事件
    1 获取表单 绑定事件
    2 阻止默认行为
    3 使用技巧 快死获取表单
    4 合法性校验 非控即可
    5 调用接口 完成新增
    6 提示用户 
    7 关闭模态框
    8 刷新数据
    9 清空新增表单
3 编辑
  1 点击修改按钮
  2 弹出模态框
  3 标题修改学员信息
  4 表单显示待编辑数据
    1 在生成 修改标签的时候，存一个 数据的 id 上去 
    2 在事件触发的时候获取id 
    3 调用接口 获取待编辑的id 对应 学员信息 obj 
    4 把obj 数据  设置到对应 表单标签中
  5 点击确认修改按钮
4 点击删除
  1 给删除绑定点击事件
  2 判断当前点击的是不是删除标签
  3 询问用户是否确定删除
  4 获取被删除数据的id
  5 发送请求 执行删除
  6 刷新数据
*/

// 获取dom元素
const tbody = document.querySelector("tbody")
const province = document.querySelector("select[name=province]")
const city = document.querySelector("select[name=city]")
const county = document.querySelector("select[name=county]")

const form = document.querySelector(".add-form")
// 获取添加按钮
const addBtn = document.querySelector(".add-btn")

// 定义一个全局变量 id表示修改的id
// let id

// 查询数据
async function getData() {
  const result = await axios({ url: "/student/list" })
  // console.log(result);
  const html = result.data.data.reduce((beforeHTML, item) => {
    // 解构
    const { id, name, age, sex, group, phone, salary, truesalary, province, city, county } = item
    return (beforeHTML + `
        <tr>
           <th scope="row">${id}</th>
           <td>${name}</td>
           <td>${age}</td>
           <td>${sex}</td>
           <td>${group}</td>
           <td>${phone}</td>
           <td>${salary}</td>
           <td>${truesalary}</td>
           <td>${province + city + county}</td>
           <td>
              <button type="button" class="btn btn-primary btn-sm update-btn" data-id="${id}">修改</button>
              <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="${id}">删除</button>
           </td>
        </tr>
        `)
  }, "")
  // 渲染标签
  tbody.innerHTML = html
}


// 初始化 省市区组件的函数
async function initSelect() {
  // 操作省
  getSelectData("/geo/province", {}, "省", province)
}

// 封装同统一请求城市数据和渲染标签
// url 请求的路径
// parmas 请求参数
// text 默认显示文本
// target 生成的标签
async function getSelectData(url, params, text, target) {
  const result = await axios({
    url,
    params,
  })
  const html = result.data.reduce((beforeHTML, item) => {
    return beforeHTML + `<option value="${item}">${item}</option>`
  }, `<option value=''>--${text}--</option>`)
  target.innerHTML = html
}


getData()
initSelect()



// 绑定province change事件
province.addEventListener("change", async function (e) {
  getSelectData("/geo/city", { pname: province.value }, "市", city)
  // 重置区标签
  county.innerHTML = county.firstChild.outerHTML
})


// 绑定city change事件
city.addEventListener("change", async function (e) {
  getSelectData("/geo/county", { pname: province.value, cname: city.value }, "县", county)
})

// 给表单绑定提交事件
form.addEventListener("submit", async function (e) {
  e.preventDefault()
  // 表单验证非空
  const data = serialize(form, { hash: true, empty: true })
  // 判断当前是新增还是编辑
  const formTitle = document.querySelector("#addModalLabel").innerText
  if (formTitle === "添加新学员") {
    delete data.id
  }
  // 对对象做遍历
  for (const key in data) {
    if (!data[key]) {
      toastr.error("请检查你的字段", "提示")
      return
    }
  }


  // 判断当前是新增还是编辑
  let result
  if (formTitle === "添加新学员") {
    // 调用接口 完成新增
    // 新增不需要带上id 删除即可
    // delete data.id
    result = await axios({
      url: "/student/add",
      method: "post",
      data
    })
  } else if (formTitle === "修改学员") {
    // 修改要多一个id属性
    // data.id = id
    result = await axios({
      url: "/student/update",
      method: "put",
      data
    })
  }

  if (result.data.code === 0) {
    toastr.success(result.data.message, "恭喜")
    $("#addModal").modal("hide")
    getData()
    // 重置清空表单
    form.reset()
    // 下拉列表需要手动重置
    city.innerHTML = city.firstChild.outerHTML
    county.innerHTML = county.firstChild.outerHTML
  }
})

// 给编辑按钮绑定事件 事件委托
// 给删除按钮绑定事件 事件委托
tbody.addEventListener("click", async function (ev) {
  // 获取被点击真正的元素
  const target = ev.target
  // 判断点击的是不是编辑按钮
  if (target.classList.contains("updata-btn")) {
    // console.log("修改");
    $("#addModal").modal("show")
    document.querySelector("#addModalLabel").innerText = "修改学员"
    // 获取身上id属性
    let id = target.dataset.id
    // 获取id对应的的学员数据
    const result = await axios({ url: "/student/one", params: { id } })
    // 获取数据
    const obj = result.data.data


    // 提前给city county 初始化
    await getSelectData("/geo/city", { pname: obj.province }, "市", city)
    await getSelectData("/geo/county", { pname: obj.province, cname: obj.city }, "县", county)



    // 遍历 给每个表单赋值
    for (const key in obj) {
      const formEle = document.querySelector(`[name=${key}]`)
      // formEle 不一定存在，所以需要先判断存在，然后再去使用
      if (formEle && key !== "sex") {
        formEle.value = obj[key]
      }
    }
    // 找到性别单选框 同时value和obj.sex相同
    document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true
  } else if (target.classList.contains("delete-btn")) {
    if (confirm("您确定删除吗？")) {
      const id = target.dataset.id
      const result = await axios({
        url: "/student/delete",
        method: "delete",
        params: { id }
      })
      if (result.data.code === 0) {
        toastr.success("删除成功", "提示")
        getData()
      }
    }
  }
})

// 添加点击按钮
addBtn.addEventListener("click", function (e) {
  $("#addModal").modal("show")
  document.querySelector("#addModalLabel").innerText = "添加新学员"
})

